<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="box" v-cloak>
        <div class="nav">
            <div class="logo">
                <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDUvYzE4ZDJlMmViMWExOTc4NzNjYTczOGFiNWZmMGRjNzEucG5n.png">
            </div>  
            <div class="navlist">
                <div>产品</div>
                <div>功能</div>
                <div>关于</div>
                <div>团队</div>
                <div>销售</div>
                <div>项目</div>
                <div>价格</div>
                <div>服务</div>
                <div>评价</div> 
                <div>联系</div>
            </div>
        </div>
        <!--轮播图 -->
        <div>
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="(item,$index) in arr" :key="$index">
                  <div class="imgbox" :style="{backgroundImage:'url('+item.imgurl+')',backgroundSize:'100% 100%'}">
                     <div class="tabletext">
                        <div>{{item.text}}</div>
                        <div>{{item.content}}</div>
                     </div>
                  </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!--  -->
        <div style="padding-top:100px;">   
            <titlebox title="产品介绍" inco="el-icon-discount" text="亲，本版本是最简单的单页式模板，不需要创建内页一般来说，
            只要半天就可以完成对这个模板的设定哦">
                <div style="padding: 60px 100px;">
                    <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYjU5YzY3YmYxOTZhNDc1ODE5MWU0MmY3NjY3MGNlYmEuanBn.jpg">
                </div>
            </titlebox>
        </div>
        <div style="padding-top: 40px;">
            <titlebox title="模板功能" inco="el-icon-table-lamp" text="这些文字都是可以根据您的需要自行更改的，所以不要怕和您的需要不一样哦.
            图片的话都没有具体的大小要求，合适就好，开心就好">
                <div style="padding:0px 80px;overflow: hidden;">
                    <div class="module_list" v-for="i in 6">
                        <div>
                            <div class="border" ><i class="el-icon-table-lamp"></i></div>
                            <h3>一页式模板</h3>
                            <p>起飞页不仅是一个方便快捷的构建网站</p>
                        </div>
                    </div>
                </div>
            </titlebox>
        </div>
        <!--  -->
        <div class="bootme">
            <div class="content_me">
                <titlebox style="color: #fff;" title="关于我们" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
                    <div style="text-align: center;color: #ff5100;font-size: 18px;">
                        起飞页自主建站平台
                    </div>
                </titlebox>
            </div>
        </div>
        <!--  -->
        <div class="me">
            <titlebox title="我们的团队" inco="el-icon-menu" text="介绍一下您的强大的团队吧。几行热情的自我介绍可以迅速的拉近您和访客的距离。">
                
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="(item,$index) in arr2" :key="$index">
                      
                      <div class="lun-box">
                        <div class="lunbo" v-for=" i in arr2">
                            <img :src="i.imgurl1">
                            <h2>{{i.text}}</h3>
                            <span>{{i.span}}</span>
                            <p>{{i.content2}}</p>
                        </div>
                    </div>
                    </el-carousel-item>
                    
                    
                </el-carousel>
            </titlebox>
        </div>
        <div class="bootme2">
            <div class="content_me">
                <titlebox style="color: #fff;" title="产品销售" inco="el-icon-coin" text="很少人会做第一个吃螃蟹的人，我们不妨避开让人尴尬的数据而展示一些客户愿意看的漂亮数据。">
                   <div class="waimian">
                        <div class="limian" v-for=" i in arr3">
                            <div class="limian2">
                                <span>{{i.span}}</span>
                            </div>
                            <div class="limian3"></div>

                            <h3>{{i.text}}</h3>
                            <i class="el-icon-s-promotion"></i>
                        </div>
                        
                        
                   </div>
                   
                </titlebox>
            </div>
        </div>
        <div class="xiangmu">
            <titlebox title="项目展示" inco="el-icon-discount" text="一个没打过仗的军队很难有说服力，当然打了很多败仗的故事也不会增加任何说服力。所以说说您成功的项目经验吧，如果没有，也可以有哦。">
                <ul>
                    <li style="color: #ccc;">活动策划|</li>
                    <li>画册设计|</li>
                    <li>电影宣传片制作|</li>
                </ul>
                <div class="module_list2" v-for="i in arr4">
                    <div>
                        <img :src="i.img" alt="">
                    </div>
                </div>
            </titlebox>

        </div>

        <div class="bootme3">
            <div class="content_me">
                <titlebox style="color: #fff;" title="产品价格" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务">
                   
                   

                </titlebox>
                <div class="jiage">
                    <div class="jichu">
                        <div class="ji-top">
                            <h2>基础版</h2>
                        </div>
                        <div class="ji-center">
                            <p>￥99<span style="font-size: 20px;">/ 月</span></p>
                            
                            
                        </div>
                        <ul>
                            <li>流量5G/每月</li>
                            <li>空间1G自动</li>
                            <li>备份每日自动备份</li>
                            <li>技术支持邮件/QQ/电话</li>
                        </ul>
                        <div class="button">
                            <input type="button" value="联系客服">
                        </div>
                    </div>
                    <div class="jichu">
                        <div class="ji-top" style="background-color: red;">
                            <h2>高级版</h2>
                        </div>
                        <div class="ji-center">
                            <p>￥159<span style="font-size: 20px;">/ 月</span></p>
                            
                            
                        </div>
                        <ul>
                            <li>流量5G/每月</li>
                            <li>空间1G自动</li>
                            <li>备份每日自动备份</li>
                            <li>技术支持邮件/QQ/电话</li>
                        </ul>
                        <div class="button">
                            <input type="button" value="联系客服" style="background-color: red;">
                        </div>
                    </div>
                    <div class="jichu">
                        <div class="ji-top">
                            <h2>终极版</h2>
                        </div>
                        <div class="ji-center">
                            <p>￥299<span style="font-size: 20px;">/ 月</span></p>
                            
                            
                        </div>
                        <ul>
                            <li>流量5G/每月</li>
                            <li>空间1G自动</li>
                            <li>备份每日自动备份</li>
                            <li>技术支持邮件/QQ/电话</li>
                        </ul>
                        <div class="button">
                            <input type="button" value="联系客服">
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <!---->
        <div class="fuwu">
            <titlebox title="我们的服务" inco="el-icon-table-lamp" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。">

                <h1>我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。</h1> 
                <div class="font">
                    <div class="font-box" v-for="i in arr5">
                        <i :class="i.clas"></i>
                        <h5>服务介绍</h5>
                        <p>応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢</p>
                    </div>    
                </div>
            </titlebox>     
        </div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./js/index.js"></script>
</html>